<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{})"></head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
		<span class="layui-breadcrumb">
			<a href="#">首页</a>
			<a>
				<cite th:text="${title}"></cite>
			</a>
		</span>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <a href="javascript:;" id="switchAll" class="layui-btn">展开/折叠</a>
                <a href="javascript:;" id="edit" class="layui-btn">编辑</a>
                <a href="javascript:;" id="addRoot" class="layui-btn">添加</a>
            </div>
        </form>
    </div>
    <table class="layui-hide" id="table" lay-filter="table" style="display: table;"></table>
</div>
</body>
<script type="text/html" id="lineOpt">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:inline="javascript">
    var treeGrid;
    var getParams = function () {
        var data = {
            groupName: $('#groupName').val(),
        }
        return data;
    }

    function reload() {
        treeGrid.reload('table', {
            page: {
                curr: 1
            }
        });
    }

    layui.use(['form', 'laydate', 'table', 'treeGrid'], function () {
        var form = layui.form, laydate = layui.laydate; //日期
        treeGrid = layui.treeGrid;//表格


        //执行一个table实例
        var treeTable = treeGrid.render({
            id: 'table',
            elem: '#table',
            url: ctxPath + '/systemGroup/paging',
            cellMinWidth: 100,
            idField: 'id',//必須字段
            treeId: 'id',//树形id字段名称
            treeUpId: 'pid',//树形父id字段名称
            treeShowName: 'groupName',//以树形式显示的字段
            iconOpen: false,//是否显示图标【默认显示】
            isOpenDefault: true,//节点默认是展开还是折叠【默认展开】
            loading: true,
            method: 'post',
            isPage: false,
            sort: false,
            cols: [[
                {field: 'groupName', width: 600, title: '组织机构'},
                {title: '操作', width: 250, align: 'center', toolbar: '#lineOpt'/**/}
            ]],
            parseData: function (res) {//数据加载后回调
                return res;
            },
            onClickRow: function (index, o) {
                console.log(index, o, "单击！");
            },
            onDblClickRow: function (index, o) {
                console.log(index, o, "双击");
            },
            onCheck: function (obj, checked, isAll) {//复选事件
                console.log(obj, checked, isAll, "复选");
            },
            onRadio: function (obj) {//单选事件
                console.log(obj, "单选");
            }
        });
        //监听行数据事件
        treeGrid.on('tool(table)', function (obj) {
            //注：tool是工具条事件名，test是table原始容器的属性 lay-filter='对应的值'
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var id = data.id;
            switch (layEvent) {
                case 'add':
                    medium_window('新增', ctxPath + '/systemGroup/toAdd?id=' + id);
                    break;
                case 'edit':
                    medium_window('编辑', ctxPath + '/systemGroup/toEdit?id=' + id);
                    break;
                case 'del':
                    del_data(id, ctxPath + '/systemGroup/delete');
                    break;
            }
        });

        $('#switchAll').click(function () {
            var treedata = treeGrid.getDataTreeList('table');
            treeGrid.treeOpenAll('table', !treedata[0][treeGrid.config.cols.isOpen]);
        });
        $('#addRoot').click(function () {
            medium_window('新增', ctxPath + '/systemGroup/toAdd?id=0');
        });
        $('#edit').click(function () {
            small_window('编辑', ctxPath + '/systemGroup/toStructure');
        });
    });

    function del_data(id, url) {
        if (id.length == 0) {
            layer.msg('请选择记录！', {
                icon: 7,
                time: 1000
            });
            return;
        }
        layer.confirm('确认要删除吗（包含子节点）？', function (index) {
            $.ajax({
                type: 'post',
                url: url,
                cache: false, // 禁用缓存
                data: {
                    id: id
                },
                traditional: true,
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg('删除成功！', {
                            icon: 1,
                            time: 1000
                        });
                        // 重载数据
                        reload();
                        return;
                    } else {
                        layer.msg('删除失败。错误信息：' + result.msg, {
                            icon: 2
                        });
                        return;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('删除失败', {
                        icon: 2
                    });
                }
            });
        });
    }

    function medium_window(title, url, width, height) {
        if (title == null || title == '') {
            title = false;
        }
        if (url == null || url == '') {
            url = '404.html';
        }
        if (width == null || width == '') {
            width = ($(window).width() * 0.6);
        }
        if (height == null || height == '') {
            height = ($(window).height() - 100);
        }
        layer.open({
            type: 2,
            area: [width + 'px', height + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: true,
            shade: 0.5,
            title: title,
            content: url
        });
    }
    function small_window(title, url, width, height) {
        if (title == null || title == '') {
            title = false;
        }
        if (url == null || url == '') {
            url = '404.html';
        }
        if (width == null || width == '') {
            width = ($(window).width() * 0.3);
        }
        if (height == null || height == '') {
            height = ($(window).height() - 200);
        }
        layer.open({
            type : 2,
            area : [ width + 'px', height + 'px' ],
            fix : false, // 不固定
            maxmin : true,
            shadeClose : true,
            shade : 0.5,
            resize : true,
            title : title,
            content : url,
        });
    }
</script>
<style>
    .dBody {
        width: 80%;
        overflow: auto;
        top: 120px;
        position: absolute;
        z-index: 10;
        bottom: 45px;
    }
</style>
</html>